<template>
	<view>
		<view class="flexs2 p_bot size24 text-gray">
			<view v-for="(item, index) in list" :key="index" class="flex-column price">
				<view>{{ item.p_number == 0 ? '原价' : item.p_number + '人团' }}</view>
				<!-- <text>￥{{ item.p_price }}</text> -->
				<!-- <text>{{ item.p_price > 0 ? '￥' : '' }}{{ item.p_price }}</text> -->
			</view>
		</view>
		<view class="width615 flexs">
			<view class="bg1"><view class="bg2" :style="[{ width: width + '%' }]"></view></view>
			
			<view class="yuans flexs2">
				<image src="../../static/yuan.png"></image>
				<block v-for="(item, index) in sums" :key="index">
					<image src="../../static/yuan.png" v-if="width > (100 / sums) * (item + 1) || width / sums == 100 / sums || width == (100 / sums) * (item + 1)"></image>
					<view class="width32" v-else><view></view></view>
				</block>
			</view>
		</view>
		<view class="flexs2 p_bot size24 text-gray">
			<view v-for="(item, index) in list" :key="index" class="flex-column price">
				<!-- <view>{{ item.p_number == 0 ? '原价' : item.p_number + '人团' }}</view> -->
				<!-- <text>￥{{ item.p_price }}</text> -->
				<text>{{ item.p_price > 0 ? '￥' : '' }}{{ item.p_price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: []
		},
		StepInfo: {
			type: Object,
			default: () => {}
		},
		packageType: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			sums: 4,
			width: 0
		};
	},
	watch: {
		list(val) {
			console.log(val);
		},
		StepInfo: {
			handler(val) {
				console.log(val);
				console.log((val.Current / val.Sum).toFixed(2));
				this.width = val.Current;
				this.sums = val.Sum - 1;
				console.log('this.width', this.width);
			},
			immediate: true, // 在 Vue 2 中无效
		},
	},
	onLoad() {
		console.log();
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.num {
	width: 660upx;
	margin: 0 auto;
	view {
		width: 20%;
		text-align: center;
	}
}
.width615 {
	width: 630upx;
	height: 32upx;
	margin: 0 auto;
	position: relative;
	.bg1 {
		width: 100%;
		height: 16rpx;
		background: #dddddd;
		.bg2 {
			border-radius: 100rpx;
			height: 100%;
			// background: linear-gradient(90.06deg, #ff7404 0.05%, #ff604e 103.03%);
			background: #EF3C2E;
		}
	}
	.yuans {
		position: absolute;
		top: 0;
		left: -2%;
		width: 104%;
		height: 100%;
		image {
			width: 22upx;
			height: 22upx;
			// border: 1upx solid;
		}
		.width32 {
			width: 32upx;
			text-align: center;
			display: flex;
			justify-content: center;
			view {
				background: #dddddd;
				width: 22upx;
				height: 22upx;
				border-radius: 50%;
			}
		}
	}
}
.p_bot {
	width: 670upx;
	margin: 15upx auto 0 auto;
}
.flexs {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flexs1 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.flexs2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flexs3 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.btns {
	width: 690upx;
	height: 90upx;
	border-radius: 45upx;
	background: #3687f7;
	font-size: 30upx;
	color: #ffffff;
	text-align: center;
	line-height: 90upx;
}
.btns2 {
	width: 690upx;
	height: 80upx;
	border-radius: 8upx;
	background: #3687f7;
	color: #ffffff;
	text-align: center;
	line-height: 80upx;
}
.size24 {
	font-size: 24upx;
}
.size26 {
	font-size: 26upx;
}
.size30 {
	font-size: 30upx;
}
.size32 {
	font-size: 32upx;
}
.size20 {
	font-size: 20upx;
}
.text-gray {
	color: #999999;
}
.price {
	view {
		font-size: 24rpx;
		margin-bottom: 15rpx;
	}
	text {
		color: #ff3326;
	}
}
.text-grey {
	color: #666666;
}
.text-blue {
	color: #3687f7;
}
.cuIcon-back {
	font-size: 40upx;
}
</style>
